<template>
  <div class="bag">
    <div class="mycard">
      <div class="leftui">
        <ul ref="ulList">
          <li>个人中心</li>
          <li @click="change1($event)" class="active">个人信息</li>
          <li @click="change2($event)">修改密码</li>
          <li @click="change3($event)">设置</li>
        </ul>
      </div>
<!--      <div style="border: 1px solid red;height: 100%"></div>-->
      <div ref="contain1" class="contain">
        <span>个人信息</span>
        <div class="formdiv">
          <el-form :model="infor" :rules="rules" label-width="auto" style="margin: 10px 10%">
            <el-row align="middle">
              <el-col :span="8">
                <el-form-item label="" prop="img">
                  <el-avatar :size="100" :src="infor.img" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="头像地址：" prop="img">
                  <el-input v-model="infor.img"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="用户名：" prop="userId" v-if="infoT==='学员'">
              <div style="width: 100%;display: flex">
                <div style="color: #4da9ff;font-weight: 700;">{{infor.userId}}</div>
                <div style="opacity: 0.4;margin-left: 10%">注：修改用户名需向管理员申请</div>
              </div>
            </el-form-item>
            <el-form-item label="用户名：" prop="id" v-else-if="infoT==='教练'">
              <div style="width: 100%;display: flex;justify-content: space-between">
                <div style="color: #4da9ff;font-weight: 700;">{{infor.id}}</div>
                <div style="opacity: 0.6">注：修改用户名需向管理员申请</div>
              </div>
            </el-form-item>
            <el-form-item label="我的评级：" v-if="infoT==='教练'">
              <el-rate
                  v-model="ratevalue"
                  disabled
                  text-color="#ff9900"
                  :texts="['较差', '一般', '不错', '很好', '最佳']"
                  show-text
              />
            </el-form-item>
            <el-form-item label="个人简介：" prop="introduction">
              <el-input
                  v-model="infor.introduction"
                  type="textarea"
                  placeholder=""
                  maxlength="100"
                  show-word-limit
              />
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="infor.name"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年龄：" prop="age">
                  <el-input v-model.number="infor.age" maxlength="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别：" prop="sex">
                  <el-radio-group v-model="infor.sex">
                    <el-radio-button label="男" />
                    <el-radio-button label="女" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="手机号：" prop="mobile">
              <el-input v-model="infor.mobile" placeholder="联系方式"/>
            </el-form-item>
            <el-row v-if="infoT==='教练'">
              <el-col :span="8">
                <el-form-item label="场地科目：" prop="place">
                  <div style="color: white;background-color: #93caff;margin-right: 5px;padding: 0 4px;height: 30px;border-radius: 2px">
                    {{infor.place}}</div>
                  <div style="margin-left: 5px;padding: 0 4px;height: 30px;color: white;background-color: #91caff;border-radius: 2px">
                    {{infor.subject}}</div>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <button class="button1" @click="changeplace" type="button">更换场地</button>
              </el-col>
            </el-row>
            <el-row v-else-if="infoT==='学员'">
              <el-col :span="12">
                <el-form-item label="所选教练：" prop="coachId">
                  <el-input v-model="infor.coachId" disabled placeholder="暂未选.."/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <button class="button1" @click="changecoach" type="button">更换教练</button>
              </el-col>
            </el-row>
            <el-form-item label="家庭住址：" prop="home">
              <el-input v-model="infor.home" placeholder="省/市/县..." maxlength="100"/>
            </el-form-item>
          </el-form>
          <div class="footer">
            <button class="but">
              <span class="button_top" @click="submitinfor">保存</span>
            </button>
            <button class="but">
              <span class="button_top" @click="resetinfor">清空</span>
            </button>
          </div>
        </div>
      </div>
      <div ref="contain2" class="contain" style="display: none">
        <span>修改密码</span>
        <div class="formdiv">
          <el-form ref="pdinfor" :model="passwordinfor" :rules="rules" label-width="auto" style="margin: 10px 10%;width: 80%">
            <el-form-item label="修改前密码：" prop="password0">
              <el-input v-model="passwordinfor.password0" type="password" show-password/>
            </el-form-item>
            <el-form-item label="新密码：" prop="password1" >
              <el-input v-model="passwordinfor.password1" type="password" show-password/>
            </el-form-item>
            <el-form-item label="确认密码：" prop="password2" >
              <el-input v-model="passwordinfor.password2" type="password" show-password/>
            </el-form-item>
          </el-form>
          <div class="footer">
            <button class="but">
              <span class="button_top" @click="changepassword">确认修改</span>
            </button>
            <button class="but">
              <span class="button_top" @click="resetpasswordinfor">重置</span>
            </button>
          </div>
        </div>
      </div>
      <div ref="contain3" class="contain" style="display: none">
        <span>设置</span>
        <div class="formdiv">
          <button class="but" style="margin: auto 0">
            <span class="button_top" @click="Loginout">退出登录</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useStore} from "vuex";
import router from "@/router";
import {getTeacherById, getTeacherGradeById, UpdateTeacher, UpdateTPassword} from "@/api/teacher";
import {getStudentById, UpdateSPassword, UpdateStudent} from "@/api/student";
import {ElMessage} from "element-plus";
const store = useStore()

//获取父组件方法或传值
const props = defineProps({
  JudgeType:{
    type:Function,
    required:true
  }
})
//登录者信息
const infoId = store.getters.Id
const infoT = store.getters.Type

const ratevalue = ref(5)
const contain1 = ref(null)
const contain2 = ref(null)
const contain3 = ref(null)
const ulList = ref(null)
const a = ref([])
const infor = ref({})
const passwordinfor = ref({
  password0:'',
  password1:'',
  password2:'',
})
const pdinfor = ref(null)
const rules = ref({
  password0:[
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  password1:[
    { required: true, message: '请输入新密码', trigger: 'blur' }
  ],
  password2:[
    { required: true, message: '请再次输入新密码', trigger: 'blur' }
  ],
  mobile:[
    { type: 'number',
      message: '手机号格式不正确',
      trigger: 'blur',
      transform(value) {
        var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
        if (!phonereg.test(value)) {
          return false
        } else {
          return Number(value)
        }
      }
    }],
  age:[
    { type: 'number', message: '年龄必须为数字' },
  ],
})
//判断用户并赋值表单
const JudgeType = async () =>{
  if (infoT === '教练'){
    await getTeacherById(infoId).then(res=>{
      infor.value = res.data
    })
    await getTeacherGradeById('0-001').then(res=>{
      ratevalue.value = res.data.grade
    })
  }else if (infoT === '学员'){
    await getStudentById(infoId).then(res=>{
      infor.value = res.data
    })
  }else {
    infor.value = {}
  }
}
JudgeType()

//清除选中状态
const closeulList = () =>{
  for (var i=1;i<ulList.value.children.length;i++){
    ulList.value.children[i].classList.remove('active')
  }
}
//样式
const change1 = (event) =>{
  contain2.value.style.display = 'none'
  contain1.value.style.display = 'flex'
  contain3.value.style.display = 'none'
  closeulList()
  event.target.classList.add('active')
}
const change2 = (event) =>{
  contain1.value.style.display = 'none'
  contain2.value.style.display = 'flex'
  contain3.value.style.display = 'none'
  closeulList()
  event.target.classList.add('active')
}
const change3 = (event) =>{
  contain1.value.style.display = 'none'
  contain2.value.style.display = 'none'
  contain3.value.style.display = 'flex'
  closeulList()
  event.target.classList.add('active')
}

//跳转
const changeplace = () =>{
  router.replace('/carpractise')
}
const changecoach = () =>{
  router.replace('/findcoach')
}
//保存，重置
const submitinfor = async () =>{
  await store.dispatch('app/SetLoginer', infor.value)
  if (infoT === '教练'){
    await UpdateTeacher(infor.value).then(res=>{
      if (res.code === 20031){
        ElMessage({
          showClose: true,
          message: '保存成功',
          type: 'success',
        })
        props.JudgeType()
      }else {
        ElMessage({
          showClose: true,
          message: '保存失败',
          type: 'error',
        })
      }
      JudgeType()
    })
  }else if (infoT === '学员'){
    await UpdateStudent(infor.value).then(res=>{
      if (res.code === 20031){
        ElMessage({
          showClose: true,
          message: '保存成功',
          type: 'success',
        })
        props.JudgeType()
      }else {
        ElMessage({
          showClose: true,
          message: '保存失败',
          type: 'error',
        })
      }
      JudgeType()
    })
  }else {
    ElMessage({
      showClose: true,
      message: '请先登录账户',
      type: 'error',
    })
  }

}
const resetinfor = () =>{
  infor.value = {}
}
const Loginout = () =>{
  store.dispatch('app/LoginOut')
}
const changepassword = () =>{
  pdinfor.value.validate( async valid=>{
    if (valid){
      if (passwordinfor.value.password1 !== passwordinfor.value.password2){
        ElMessage({
          showClose: true,
          message: '两次新密码输入不一致',
          type: 'warning',
        })
    }else {
          if (infoT === '教练'){
            await UpdateTPassword({id:infoId,oldPassword:passwordinfor.value.password0,newPassword:passwordinfor.value.password2}).then(res=>{
              if (res.code === 20031){
                ElMessage({
                  showClose: true,
                  message: '修改成功，请重新登录',
                  type: 'success',
                })
                store.dispatch('app/LoginOut')
              }else {
                ElMessage({
                  showClose: true,
                  message: '旧密码错误',
                  type: 'error',
                })
              }
            })
          }else if (infoT === '学员'){
            await UpdateSPassword({id:infoId,oldPassword:passwordinfor.value.password0,newPassword:passwordinfor.value.password2}).then(res=>{
              if (res.code === 20031){
                ElMessage({
                  showClose: true,
                  message: '修改成功，请重新登录',
                  type: 'success',
                })
                store.dispatch('app/LoginOut')
              }else {
                ElMessage({
                  showClose: true,
                  message: '旧密码错误',
                  type: 'error',
                })
              }
            })
          }else {
            ElMessage({
              showClose: true,
              message: '请先登录账户',
              type: 'error',
            })
          }
        }
    }else {
      console.log(valid)
    }
  })
}
const resetpasswordinfor = () =>{
  pdinfor.value.resetFields()
}
</script>

<style scoped>
.bag{
  height: auto;
  min-height: 600px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  box-sizing: border-box;
  /*border: 1px solid blue;*/
}
.mycard{
  width: 60%;
  flex: 1;
  min-width: 700px;
  display: flex;
  /*overflow: auto;*/
  margin: 5px 0 5px 0;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: #b9b9b9 0 0  10px 0;
  border: 1px solid #b7b7b7;
}
.leftui{
  flex: 0.15;
  height: 100%;
  min-width: 100px;
  box-sizing: border-box;
  border-right: 1px solid #b7b7b7;
  background-color: #f6f6f6;
}
.leftui ul{
  /*border: 1px solid #2a0000;*/
  list-style-type: none;
  text-decoration: none;
}
.leftui li:first-child{
  height: 50px;
  display: flex;
  opacity: 0.6;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #b7b7b7;
  cursor: pointer;
}
.leftui li:not(:first-child){
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  transition: color 0.2s;
  cursor: pointer;
}
.leftui li:not(:first-child):hover{
  background-color: #dcdcdc;
}
.active{
  color: #ffffff !important;
  background-color: #00a1d7 !important;
}
.contain{
  flex: 0.85;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  /*border: 1px solid red;*/
}
.contain>span{
  width: 100%;
  height: 50px;
  min-height: 50px;
  font-size: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 华文仿宋, serif;
  color: #000000;
  border-bottom: 1px solid #b7b7b7;
}
.formdiv{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*border: 1px solid red;*/
}
.footer{
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  /*border: 1px solid red;*/
}
:deep(.el-rate__item){
  display: flex;
}
:deep(.el-rate__text){
  height: 80%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5ca1ff;
  background-color: #edf5ff;
  font-size: 13px;
  border-radius: 10%;
  border: 1px solid #ddeeff;
}


/* From uiverse.io by @meermubashar */
.button1 {
  width: 100px;
  height: 30px;
  font-size: 17px;
  cursor: pointer;
  border: none;
  outline: none;
  margin-left: 10px;
  background: transparent;
  color: #100505;
  font-family: "Curlz MT", serif;
  font-weight: 700;
  position: relative;
  transition: all 0.5s;
  z-index: 1;
}

.button1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #409eff;
  z-index: -1;
  transition: all 0.5s;
}

.button1:hover::before {
  width: 100%;
}

.button1:hover {
  color: #ffffff;
}

.button1:active:before {
  background: #b9b9b9;
}
/* From uiverse.io by @Voxybuns */
.but {
  font-size: 17px;
  font-weight: bold;
  border: none;
  margin: 5px;
  border-radius: 16%;
  background: #000000;
}

.button_top {
  display: block;
  box-sizing: border-box;
  border: 2px solid #000000;
  border-radius: 16%;
  padding: 8px 10px 8px 10px;
  background: #ffffff;
  color: #000000;
  transform: translateY(-4px);
  transition: transform 0.1s ease;
}

.but:hover .button_top {
  transform: translateY(-6px);
}

.but:active .button_top {
  transform: translateY(0);
}
</style>